'use client';

import { useEffect, useRef, useState } from 'react';
import './index.scss';

interface ThisProps {
  duration?: number;
  message: string;
  onClose?: (...args: any[]) => void;
}
const PopCard = ({ duration = 1200, message, onClose }: ThisProps) => {
  const [visible, setVisible] = useState(true);
  const closeRef = useRef(onClose);
  useEffect(() => {
    const timer = setTimeout(() => {
      setVisible(false);
      closeRef.current?.();
    }, duration);
  }, [duration]);

  return (
    <div className="popcard-wrapper">
      <div className="popcard-arrow" />
      <div className="popcard-content">{message}</div>
    </div>
  );
};

export default PopCard;
